<template lang="html">
  <div class="container">
      <div class="search">
            <el-button type="primary" size="small" @click="onHandleAdd">新增</el-button>
            <el-button type="danger" size="small" @click="onDelete">批量删除</el-button>
      </div>

      <div class="tables">
        <el-table :data="tableData" :row-class-name="rowStyle" border @selection-change="handleSelectionChange" :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="date" label="套餐组合" align="center" width="300"></el-table-column>
              <el-table-column prop="name" label="优惠比例" align="center"></el-table-column>
              <el-table-column prop="name" label="状态" align="center">
                <template slot-scope="scope">
                    <el-switch @change="onSwitch" v-model="switchVal" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="fEditor(scope.row)">编辑</el-button>
                      <el-button type="danger" size="mini" @click="fDelete(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
        </el-table>
        <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
      </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      currentPage: 1,
      totalPage: 100,
      rowStyle: '',//'row_style',
      switchVal: 1
    }
  },
  methods:{
    onHandleAdd(){
      this.$router.push('/activity/package/add_package')
    },
    onDelete(){},
    fEditor(e){

    },
    fDelete(e){

    },
    onSwitch(){},
    handleSizeChange(e){
      // console.log(e);
    },
    handleCurrentChange(e){
      // console.log(e);
    },
    handleSelectionChange(e){
      // console.log(e)
    },

  }
}
</script>

<style lang="css" scoped>
.search{
  margin-bottom: 10px;
}
/deep/.el-table .row_style{
  background-color: #f8f8f8 !important;
}
</style>
